<template>
  <div class="QCommentBox">
    <div class="CommenterInfo" :style="{height:(first ? '50px' : '30px')}">
      <div class="CommenterHeadPicture"  :style="{width:(first ? '50px' : '30px'),height:(first ? '50px' : '30px'),marginLeft:(first ? '0px' : '30px')}">
        <el-avatar :src="avatarError?'//images.weserv.nl/?url=150.158.52.191:8080/HeadPortrait/default?t='+Math.random():'//images.weserv.nl/?url=150.158.52.191:8080/HeadPortrait/'+comment.user_id+'?t='+Math.random()" class="pic" @error="this.avatarError=!this.avatarError"/>
      </div>
      <div class="CommenterNameBox">
        <text class="CommenterName" :style="{fontsize:(first ? '20px' : '16px')}">{{comment.username+((this.comment.user_id==this.userID)?"(我)":"")}}</text>
      </div>
    </div>
    <div class="QCommentContentBox">
      <p class="QCommentContent" :style="{paddingLeft:(first ? '0px' : '30px')}">{{comment.comment_content}}</p>
    </div>
    <div class="QCommentFooter">
      <text class="QCommentTime" :style="{marginLeft:(first ? '0px' : '30px')}">{{comment.create_time}}</text>
      <div class="QCOperationBox">
        <el-button :type="this.comment.liked?'info':'primary'" plain :icon="this.comment.liked?'StarFilled':'Star'" class="LikeQCBtn" @click="FavorComment">{{this.comment.liked_count}}</el-button>
        <text class="CheckAnswerCommentBtn" @click="OpenReply" v-show="first">
          <el-icon class="ReplyIcon"><ChatLineSquare /></el-icon>
          {{"回复"}}
        </text>
        <text class="DeleteCommentBtn" @click="DeleteComment" v-show="this.comment.user_id==this.userID">
          <el-icon class="ReplyIcon"><ChatLineSquare /></el-icon>
          {{"删除"}}
        </text>
      </div>
    </div>
    <div class="QCReply" v-if="reply">
      <el-input
          v-model="ReplyContent"
          type="textarea"
          :rows="3"
          placeholder="想要说什么"
      />
      <el-button plain class="QCSubmitReply" @click="SubmitReply">提交</el-button>
    </div>
    <div class="QCommentReplyBox">
      <Comment
          v-for="rc in comment.responses"
          :comment="rc"
          :index="index"
          :first="false"
          :type="this.type"
          @LikeComment="LikeComment"
          @cancel_LikeComment="cancel_LikeComment"
          @delComment="delComment"/>
    </div>
    <el-divider v-show="first"/>
  </div>
</template>

<script>
import {StarFilled,Star} from "@element-plus/icons-vue";
import ReplyComment from "@/components/common/ReplyComment.vue";
export default {
  name: "Comment",
  props: ["comment","first","type","index"],
  setup() {
    return {
      StarFilled,
      Star
    }
  },
  components: {
    ReplyComment
  },
  mounted() {
  },
  data() {
    return {
      ReplyContent:"",
      reply:false,
      avatarError:false,
      userID:localStorage.getItem("userID")
    }
  },
  methods: {
    OpenReply(){
      this.reply=!this.reply
    },
    SubmitReply(){
      if(ReplyComment.length===0){
        this.notifyError("你还没有输入任何内容!")
      }else{
        let param = {
          comment_content:this.ReplyContent,
          to_id:this.comment.to_id,
          user_id:localStorage.getItem("userID"),
          type:this.type,
          at_comment_id:this.comment.comment_id
        }
        this.$axios
            .post(`${this.$target}/comment`,JSON.stringify(param),{
              headers: {
                'Content-Type': 'application/json;charset=utf-8'
              }
            })
            .then(res=>{
              if(res.data.status===0){
                if(this.comment.responses==null){
                  this.comment.responses=[]
                }
                this.comment.responses.push(res.data.data)
                this.notifySucceed("发表评论成功!")
                this.ReplyContent=""
              }else{
                this.notifyError("发表评论失败!")
              }
            })
      }
    },
    FavorComment() {
      if(!this.comment.liked){
        this.$axios
            .patch(`${this.$target}/comment/like?comment_id=`+this.comment.comment_id+`&user_id=`+localStorage.getItem("userID"))
            .then(res=>{
              if(res.data.data){
                this.notifySucceed("点赞成功!")
                this.$emit("LikeComment",this.index)
              }else{
                this.notifySucceed("点赞失败!")
              }
            })
      }else{
        this.$axios
            .patch(`${this.$target}/comment/like/cancel?comment_id=`+this.comment.comment_id+`&user_id=`+localStorage.getItem("userID"))
            .then(res=>{
              if(res.data.data){
                this.notifySucceed("取消点赞成功!")
                this.$emit("cancel_LikeComment",this.index)
              }else{
                this.notifySucceed("取消点赞失败!")
              }
            })
      }
    },
    LikeComment(index) {
      this.comment.responses[index].liked=true
      this.comment.responses[index].liked_count++
    },
    cancel_LikeComment(index) {
      this.comment.responses[index].liked=false
      this.comment.responses[index].liked_count--
    },
    DeleteComment() {
      this.$axios
          .delete(`${this.$target}/comment?comment_id=`+this.comment.comment_id)
          .then(res=>{
            if(res.data.data){
              this.$emit("delComment",this.index)
              this.notifySucceed("删除成功!")
            }else{
              this.notifyError("删除失败!")
            }
          })
    },
    delComment() {
      this.comment.responses.splice(this.index,1)
    }
  }
}
</script>

<style scoped lang="less">
.QCommentBox {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
  .CommenterInfo {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: left;
    .CommenterHeadPicture {
      width: 50px;
      height: 50px;
      .pic {
        width: 100%;
        height: 100%;
      }
    }
    .CommenterNameBox {
      height: 100%;
      width: 180px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-left: 10px;
      .CommenterName {
        width: 100%;
        text-align: left;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  .QCommentContentBox {
    width: 100%;
    height: auto;
    margin-top: 10px;
    .QCommentContent {
      width: 90%;
      height: fit-content;
      text-align: left;
      font-size: 18px;
      word-wrap: break-word;
    }
  }
  .QCommentFooter {
    margin-top: -10px;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    .QCommentTime {
      margin-top: 2px;
    }
    .QCOperationBox {
      width: fit-content;
      height: 100%;
      margin-right: 20px;
      display: flex;
      justify-content: right;
      .LikeQCBtn {
        height: 20px;
        width: 40px;
        padding-top: 5px;
        margin-right: 20px;
      }
      .CheckAnswerCommentBtn {
        cursor: pointer;
        margin-right: 20px;
        font-size: 18px;
      }
      .DeleteCommentBtn {
        cursor: pointer;
        font-size: 18px;
      }
    }
  }
  .QCReply {
    margin-top: 10px;
    text-align: right;
    .QCSubmitReply {
      position: relative;
      margin-right: 15px;
      margin-top: -60px;
    }
  }
  .QCommentReplyBox {
    margin-top: 20px;
  }
}
</style>